<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>添加商品</title>

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_608853_ykjxktkf2agojemi.css">

  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
  <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
  <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">
  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
  <script src="/static/js/store.js"></script>
  <style>
    .headTitle {
      position: fixed;
      border: 1px solid #f4f4f4;
      border-top: none;
      border-left: none;
      border-right: none;
      background: #fff;
      width: 100%;
      height: 44px;
      line-height: 44px;
    }
    .head {
      position: absolute;
      width: 100%;
      max-width: 640px;
      right: 0;
      margin: 0 auto;
      height:44px;
      background: rgb(255, 255, 255);
      top: 0;
      left: 0;
      z-index: 3;
    }
    .head .title1 {
      text-align: center;
      font-size: 17px;
      margin: 0 8%;
      font-style: normal;
      font-weight: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 100%;


    }
    .head a img {
      float: left;
      display: block;
      width: 100%;
      width: 10px;
      height: 16px;
      margin-left: 5%;
      margin-top: 14px;
    }
    .weui-cells{
      font-size: 15px;
    }
  </style>
</head>
<body style="background-color: rgb(239,239,244)">
<header class="head headTitle" style="text-align: center">
  <a class="back" href="{:url('/home/goods/management')}"><img src="/static/images/back_gray.png" alt="返回"></a>
  <span style="margin-right: 8%">添加商品</span>
</header>
<div id="app" style="margin-top: 52px;">
  <form method="post" action=" " id="box"  enctype="multipart/form-data">
    <div class="weui-cells weui-cells_form" style="background-color: rgb(239,239,244)">
      <div class="weui-cell" style="background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">名称：</label></div>
        <div class="weui-cell__bd">
          <input id="name" class="weui-input" type="text" name="name" placeholder="请输入名称"  required="required">
        </div>
      </div>
      <div class="weui-cell weui-cell_select" style="margin-top: 8px;background-color: #fff">
        <span style="margin-left: 15px">分类：</span>
        <div class="weui-cell__bd" style="margin-left: 38px">

          <select class="weui-select" name="fenlei" value="" style="padding-left: 22px">
            <option value="开关" style="background: #04BE02">开关</option>
            <option value="门" style="background: #04BE02">门</option>
            <option value="锁" style="background: #04BE02">锁</option>
            <option value="地板" style="background: #04BE02">地板</option>
            <option value="油漆" style="background: #04BE02">油漆</option>
            <option value="窗帘" style="background: #04BE02">窗帘</option>
            <option value="插座" style="background: #04BE02">插座</option>
          </select>
        </div>
      </div>
      <div class="weui-cell" style="margin-top: 8px;background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">型号：</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" name="xinghao" placeholder="请输入型号" required="required">
        </div>
      </div>
      <div class="weui-cell " style="margin-top: 8px;background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">材质：</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" name="caizhi" placeholder="请输入材质" required="required">
        </div>
      </div>
      <div class="weui-cell" style="margin-top: 8px;background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">优惠：</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" name="discount" value="" style="width: 90%" required="required">
          <div style="float: right">折</div>
        </div>
      </div>

      <div class="weui-cell" style="margin-top: 8px;background-color: #fff">
        <div class="weui-cell__hd"><label class="weui-label">位置</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="in" name="weizhi" type="text" value="" required="required">
        </div>
      </div>
      <div class="weui-btn-area" style="padding-top: 40px">
        <a href="{:url('home/goods/add_next')}"> <div class="weui-btn weui-btn_primary" onclick="next()">下一步</div></a>
      </div>
    </div>

  </form>
</div>
</body>

<script>
  var obj={
      name:"",
      fenlei:"",
      xinghao:"",
      caizhi:"",
      discount:"",
      weizhi:""
  }
    $("#in").select({
        title: "位置",
        multi: true,
        min: 1,
        max: 6,
        items: [
            {
                title: "客厅",
                value:  "客厅"
            },
            {
                title: "厨房",
                value: "厨房"
            },
            {
                title: "卧室",
                value: "卧室"
            },
            {
                title: "洗漱台",
                value: "洗漱台"
            },
            {
                title: "阳台",
                value: "阳台"
            },
            {
                title: "浴室",
                value: "浴室"
            },
        ],
        onChange: function(d) {
            console.log(this, d);
        },
        onClose: function (d) {
            console.log('close')
        }
    });

    $(function () {
      var  shuju=store.get('shu');
        console.log(shuju);
        if(shuju){
           $("input[name='name']").val(shuju.name) ;
            $("select").find("option:selected").text(shuju.fenlei);
            $("input[name='xinghao']").val(shuju.xinghao);
            $("input[name='caizhi']").val(shuju.caizhi);
            $("input[name='discount']").val(shuju.discount);
            $("input[name='weizhi']").val(shuju.weizhi);
        }
    });

    // 本地存储
function next() {
    obj.name=$("input[name='name']").val();
    obj.fenlei=$("select").find("option:selected").text();
    obj.xinghao=$("input[name='xinghao']").val();
    obj.caizhi=$("input[name='caizhi']").val();
    obj.discount=$("input[name='discount']").val();
    obj.weizhi=$("input[name='weizhi']").val();
    store.set('shu', obj);

}
</script>
</html>